<script lang="ts">
    import { Button } from "../Button";
    import { Dropdown } from "../Dropdown";
    import { useFormItemContext } from "../FormItem/FormItem.svelte";
    import { Input } from "../Input";
    import { Space } from "../Space";
    import { useClassList } from "../utils/useClassList";
    import Alpha from "./Alpha.svelte";
    import type { ColorPickerProps } from "./ColorPicker";
    import Hue from "./Hue.svelte";
    import Recommend from "./Recommend.svelte";
    import Saturation from "./Saturation.svelte";
    import { changeColor, toRGBAString } from "./utils";
    import Value from "./Value.svelte";

    let { value = $bindable(""), ...props }: ColorPickerProps = $props();
    const ctx = useFormItemContext();

    let open = $state(false);
    const align = props.align ?? "bottomLeft";
    let val = $state(changeColor(value || "#2D8CF0"));
    let confirmVal = $state("");
    let oldHue: any = val;

    const classList = $derived(
        useClassList(props, "cm-color-picker", {
            [`cm-color-picker-${props.size}`]: props.size,
        })
    );
    const inlineClassList = $derived(
        useClassList(props, "cm-color-picker-wrap", {
            "cm-color-picker-inline": props.inline,
        })
    );

    const onColorChange = (data: any) => {
        colorChange(data);
    };

    const colorChange = (data: any, _oldHue?: any) => {
        oldHue = val.hsl.h;
        val = changeColor(data, _oldHue || oldHue);
    };

    const onConfirm = () => {
        open = false;
        value = confirmVal;
        props.onchange?.(confirmVal);
        ctx?.onFieldChange?.();
    };

    const onClear = () => {
        open = false;
        value = "";
        props.onchange?.("");
        ctx?.onFieldChange?.();
    };

    $effect(() => {
        if (props.alpha) {
            confirmVal = toRGBAString(val.rgba);
        } else {
            confirmVal = val.hex;
        }
    });

    const onConfirmChange = (v: string) => {
        const color = changeColor(v);
        val = color;
    };
</script>

{#snippet renderMain()}
    <Space dir="v">
        <Saturation value={val} onChange={onColorChange} />
        <Hue value={val} onChange={onColorChange} />
        {#if props.alpha}
            <Alpha value={val} onChange={onColorChange} />
        {/if}
        {#if props.recommend}
            <Recommend colors={props.colors} onChange={onColorChange} />
        {/if}
        <div class="cm-color-picker-confirm">
            <Space dir="h">
                <Input size="small" class="cm-color-picker-input" bind:value={confirmVal} onchange={onConfirmChange} />
                <Button size="small" type="default" onclick={onClear}>清除</Button>
                <Button size="small" type="primary" onclick={onConfirm}>确定</Button>
            </Space>
        </div>
    </Space>
{/snippet}

{#if props.inline}
    <div class={inlineClassList}>
        {@render renderMain()}
    </div>
{:else}
    <div class={classList} style={props.style}>
        <Dropdown transfer={props.transfer} {align} disabled={props.disabled} trigger="click" bind:visible={open}>
            {#snippet menu()}
                <div class="cm-color-picker-wrap">
                    {@render renderMain()}
                </div>
            {/snippet}
            <Value disabled={props.disabled} size={props.size} currentValue={val} {value} {open} />
        </Dropdown>
    </div>
{/if}
